<template>
  <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog">
    <el-form :model="editAppForm" ref="addAppRef" :rules="addApprules" inline="true">
      <el-form-item label="原始照片" :label-width="formLabelWidth" prop="name">
        <el-image :preview-src-list="srcList" style="width: 148px; min-height: 148px;text-align: center;"
          :src="editAppForm.photoUrl" :fit="scale - down" class="el-upload--picture-card">
          <template #error>
            <div class="image-slot" style="line-height: 148px;">
              暂无照片
            </div>
          </template>
        </el-image>
      </el-form-item>
      <el-form-item label="更换照片" :label-width="formLabelWidth" prop="name">
        <addImageView ref="addImage" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="save()">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";
import addImageView from "@/components/addImage.vue";
import {
  Picture
} from "@element-plus/icons-vue";
import { vxRule } from "@/utils/validator";

export default {
  name: "AddApp",
  components: { ElForm, ElMessage, addImageView, Picture },

  data() {
    return {
      dialogFormVisible: ref(false),
      formLabelWidth: "120px",
      title: "",
      personnelType: "",
      fileList: '',
      editAppForm: {
        name: "",
        sex: 1,
        photoUrl: ''
      },
      srcList: [],
      // 校验规则
      addApprules: {
        name: vxRule(true, null, "blur"),
        sex: vxRule(true, null, "blur"),
        mobile: vxRule(true, null, "blur"),
        campus: vxRule(true, null, "blur"),
        personnelType: vxRule(true, null, "blur"),

      },
    };
  },
  mounted() {
    this.user = JSON.parse(sessionStorage.getItem('user'))
  },
  methods: {
    closeDialog() {
      this.clear();
      this.$refs.addImage.clearImage();
    },
    cancel() {
      this.dialogFormVisible = false;
      this.clear();
    },
    getBaseTeacherById(id) {
      httpService("/javaApi/baseTeacher/queryById", { id: id }, "get").then(
        (data) => {
          this.editAppForm = data;
          this.editAppForm.sex = String(this.editAppForm.sex);
          this.editAppForm.personnelType = String(this.editAppForm.personnelType);
          this.editAppForm.campus = String(this.editAppForm.campus);
          this.srcList = [data.photoUrl]
          this.editAppForm.photoUrl = 'https://wx.zhengzhong.cn/' + data.photoUrl
        }
      );
    },
    clear() {
      this.dialogFormVisible = false;
      this.editAppForm.name = "";
      this.editAppForm.sex = "";
      this.editAppForm.mobile = "";
    },
    save() {
      // let fileList = this.$refs.addImage.fileList;
      let fileData = this.$refs.addImage.fileData;
      if (fileData != '') {
        let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
        params.append("file", fileData);
        params.append("id", this.editAppForm.id);
        httpService("/javaApi/baseTeacher/editPhotoUrl", params, "post").then(
          (data) => {
            if (data.code == 200) {
              ElMessage.success('提交成功');
              this.clear();
            } else {
              ElMessage.error("提交失败");
            }
          }
        );
      } else {
        return false;
      }
    },
  },
};
</script>

<style>
.el-my-select {
  display: inline-block;
  position: relative;
  line-height: 32px;
  width: 100%;
}

.el-dialog__header {
  padding: var(--el-dialog-padding-primary);
  padding-bottom: 10px;
  border-bottom: 1px solid #dedede;
}
</style>